<template>
  <div style="padding: 10px">
    <div style="padding: 20px; display: flex; justify-content: flex-start">
      <img
          :src="imageIcon"
          style="width: 100px; border-radius: 50%; margin-right: 10px"
      />
      <span style="line-height: 100px">Afsar Hossen</span>
    </div>

    <van-collapse v-model="activeNames">
      <van-collapse-item title="订单" name="1">
        <template #title>
          <div><van-icon name="orders-o" style="margin-right: 6px" />订单</div>
        </template>
        代码是写出来给人看的，附带能在机器上运行。
      </van-collapse-item>
<!--      这段代码是使用Vant UI组件库中的van-collapse组件，用于创建一个可折叠面板。-->

<!--      其中，v-model="activeNames"表示绑定一个名为activeNames的变量，用于控制当前展开的面板。-->

<!--      <van-collapse-item>标签表示一个可折叠面板项，title属性表示该面板项的标题，name属性表示该面板项的名称，用于控制展开和折叠。-->

<!--        <template #title>标签表示自定义面板项的标题内容，-->
<!--          这里使用了van-icon组件来显示一个订单图标，并设置样式margin-right: 6px，表示图标与文字之间有6像素的间距。-->

      <van-collapse-item title="个人信息" name="2">
        技术无非就是那些开发它的人的共同灵魂。
        <template #title>
          <div>
            <van-icon name="user-o" style="margin-right: 6px" />个人信息
          </div>
        </template>
      </van-collapse-item>
      <van-collapse-item title="收货地址" name="3">
        <template #title>
          <div>
            <van-icon name="comment-o" style="margin-right: 6px" />收货地址
          </div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>

<!--      这段代码是使用Vant UI组件库中的van-collapse组件，用于创建一个可折叠面板。-->

<!--      其中，第一个van-collapse-item标签表示一个可折叠面板项，标题为"个人信息"，名称为"2"。在<template #title>中自定义了面板项的标题内容，使用了van-icon组件来显示一个用户图标，并设置样式margin-right: 6px，表示图标与文字之间有6像素的间距。-->

<!--      第二个van-collapse-item标签表示另一个可折叠面板项，标题为"收货地址"，名称为"3"。同样在<template #title>中自定义了面板项的标题内容，使用了van-icon组件来显示一个评论图标，并设置样式margin-right: 6px，表示图标与文字之间有6像素的间距。-->

      <van-collapse-item title="支付方式" name="3">
        <template #title>
          <div>
            <van-icon name="balance-pay" style="margin-right: 6px" />支付方式
          </div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>


      <van-collapse-item title="卡券" name="3">
        <template #title>
          <div><van-icon name="ecard-pay" style="margin-right: 6px" />卡券</div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
      <van-collapse-item title="消息" name="3">
        <template #title>
          <div><van-icon name="chat-o" style="margin-right: 6px" />消息</div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>


      <van-collapse-item title="帮助" name="3">
        <template #title>
          <div><van-icon name="fail" style="margin-right: 6px" />帮助</div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>


      <van-collapse-item title="关于" name="3">
        <template #title>
          <div><van-icon name="setting-o" style="margin-right: 6px" />关于</div>
        </template>

        在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
      </van-collapse-item>
    </van-collapse>
  </div>
</template>
<script setup>

import { ref, reactive } from "vue";
import imageIcon from "../assets/user.webp";

let activeNames = reactive([]);
// 这段代码是使用Vue.js框架编写的。它导入了两个模块：`ref`和`reactive`，以及一个名为`imageIcon`的图片资源。
//
// `ref`是一个用于创建响应式引用的函数，它可以将普通变量转换为响应式对象。在Vue.js中，响应式对象可以自动追踪其变化并触发更新。
//
// `reactive`是一个用于创建响应式对象的函数，它可以将普通对象转换为响应式对象。响应式对象具有与普通对象相同的属性和方法，但它们会自动追踪其属性的变化并触发更新。
//
// `imageIcon`是一个图片资源，它的路径为"../assets/user.webp"。这个图片资源可能被用于显示用户头像或其他相关图像。
//
// `let activeNames = reactive([]);`这行代码声明了一个名为`activeNames`的变量，并将其初始化为一个空数组。然后，通过调用`reactive`函数，
// 将其转换为一个响应式对象。这个变量可能用于存储一组激活的名称或状态，以便在Vue组件中使用。
</script>